<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import Stage from './Stage.vue';

const el = ref();
const scale = ref(1);
const active = ref(null);

const props = defineProps({
  data: { type: Object, required: true }
});

const backgroundPosition = ref({ x: 60, y: 60 });
const background = computed(() => {
  return props.data.background || {};
});

const stages = computed(() => {
  return props.data.stages || [];
});

onMounted(() => {
  el.value.addEventListener('wheel', onWheel);
});

onUnmounted(() => {
  el.value.removeEventListener('wheel', onWheel);
});

/** @事件 当前选中 */
function onActive(value) {
  active.value = value;
}

/** @事件 缩放画布 */
function onWheel(e) {
  if (e.deltaY < 0) {
    scale.value += 0.1;
  } else {
    scale.value -= 0.1;
  }
}
</script>

<template>
  <div class="MapEditor" ref="el">
    <Stage
      v-model:item="background"
      v-model:offset="backgroundPosition"
      :scale="scale"
      :active="active === 'background'"
      @active="onActive('background')"
    >
      <Stage
        v-for="(_, index) in stages"
        v-model:item="stages[index]"
        :key="`stage-${index}`"
        :active="active === `stage-${index}`"
        @active="onActive(`stage-${index}`)"
      />
    </Stage>
  </div>
</template>

<!-- 允许自定义宽高通过CSS进行控制 -->
<style scoped>
.MapEditor {
  background-color: gray;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
</style>